<div class="row servers-component">
  <panel>
    <div class="title">
      <span>Servers</span>
      <div class="actions">
        <button class="btn btn-default btn-sm" (click)="adding = !adding">
          <span *ngIf="adding">Cancel</span>
          <span *ngIf="!adding">Add Server</span>
        </button>
        <div *ngIf="adding">
          <input type="text" placeholder="user:password@hostname:port" [(ngModel)]="newServer" [disabled]="loading" />
        </div>
        <button *ngIf="adding"
                class="btn btn-outline-success btn-sm"
                (click)="addServer()"
                [disabled]="!newServer.length || loading">
          Add
        </button>
      </div>
    </div>
    <table class="table table-hover">
      <thead>
        <th>name</th>
        <th>databases</th>
        <th>size</th>
        <th></th>
      </thead>
      <tbody>
        <tr *ngFor="let server of servers" [hidden]="loading">
          <td>
            <a *ngIf="!server.error" routerLink="/servers/{{ server.name | serverName }}/databases">{{ server.name | serverName }}</a>
            <span class="error" *ngIf="server.error">
              <span class="badge badge-danger" [ngbTooltip]="server.error.message" placement="bottom">Error</span>
              {{ server.name | serverName }}
            </span>
          </td>
          <td>
            <span class="dotted"
                  *ngIf="server.databases"
                  [ngbPopover]="popContent"
                  placement="right"
                  triggers="manual"
                  #p1="ngbPopover"
                  (mouseenter)="toggle(p1, server.databases)"
                  (mouseleave)="toggle(p1)"
            >{{ server.databases.length }}</span>
          </td>
          <td><span *ngIf="server.databases">{{ server.size | bytes }}</span></td>
          <td class="actions">
            <button type="button" class="btn btn-outline-danger btn-sm" (click)="removeServer(confirmRemoval, server)">
              Remove from list
            </button>
          </td>
        </tr>
        <tr *ngIf="servers.length == 0 && !loading">
          <td colspan="4">
            <div class="center">No servers...</div>
          </td>
        </tr>
        <tr *ngIf="loading">
          <td colspan="4">
            <div class="center">Loading...</div>
          </td>
        </tr>
      </tbody>
    </table>
  </panel>

  <ng-template #popContent let-collection="collection" let-clipped="clipped">
    <table class="sm">
      <thead>
        <th>Database</th>
        <th>Collections</th>
        <th>Size</th>
      </thead>
      <tbody>
        <tr *ngFor="let item of collection">
          <td>{{ item.name }}</td>
          <td>{{ item.collections.length }}</td>
          <td>{{ item.size | bytes }}</td>
        </tr>
        <tr *ngIf="clipped">
          <td colspan=3>{{ clipped }} more items...</td>
        </tr>
      </tbody>
    </table>
  </ng-template>

  <ng-template #confirmRemoval let-modal>
    <div class="modal-body">
      <p>
        Are you sure you wan't to remove this server? This will only remove it from this list.
        You can add it back
      </p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default btn-sm" (click)="modal.close(false)">No</button>
      <button type="button" class="btn btn-outline-danger btn-sm" (click)="modal.close(true)">Yes</button>
    </div>
  </ng-template>
</div>
